
$vs-colors: (
    lightest: $gray-400,
    light: $gray-600,
    dark: $white-always,
    darkest: $gray-900,
);
$vs-border-color: $input-border-color;
$vs-dropdown-box-shadow: none;
$vs-border-radius: $input-border-radius;
$vs-dropdown-bg: $input-bg;
$vs-state-active-bg: $primary;
$vs-selected-bg: $light;
$vs-selected-bg: $primary;
$vs-controls-color: $gray-400;

@import '~vue-select/src/scss/vue-select.scss';

.v-select {
    background: $input-bg;
    border-radius: $input-border-radius;

    .form-inline & {
        width: 196px;
    }

    &.vs--open {
        .vs__dropdown-toggle {
            transition: all 0.3s ease-out;
            border-color: $input-hover-border-color;
        }

        .vs__dropdown-menu {
            transition: all 0.3s ease-out;
            border-color: $input-hover-border-color;
        }
    }

    .vs__clear {
        display: flex;
    }

    input {
        color: $input-color;
        &::placeholder {
            color: $input-placeholder-color;
        }
    }

    .vs__selected-options {
        max-width: calc(100% - 41px);
        flex-wrap: nowrap;

        .vs__selected {
            max-width: 100%;
            white-space: nowrap;
            font-weight: 400;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    &.vs--single {
        .vs__selected-options {
            .vs__selected {
                color: $input-color;
            }
        }
    }

    .vs__actions {
        > * {
            fill: $input-color;
        }
    }

    .vs__dropdown-toggle {
        padding: 2px 0 6px 0;
        font-size: $input-font-size;
    }

    .vs__dropdown-option {
        display: inline-block;
        min-width: 100%;
        color: $input-color;

        &.vs__dropdown-option--highlight {
            color: $white-always;
        }
    }

    .input-group & {
        position: relative;
        flex: 1 1 auto;
        width: 1%;
        min-width: 0;
        margin-bottom: 0;
    }
}